<template>
  <div>
    <Paper
      style="border-radius: 10px 10px 0px 0px; margin-bottom: 4px"
      title="筛选条件"
    >
      <row style="margin-top: 14px">
        <i-col v-for="item in firstOptions" :key="item.id" span="8">
          <div class="flex-row">
            <Label :name="item.name"></Label>
            <Input class="input" v-model="item.value"></Input>
          </div>
        </i-col>
        <i-col
          v-show="isExpending"
          v-for="item in secondOptions"
          :key="item.id"
          span="8"
        >
          <div class="flex-row">
            <Label :name="item.name"></Label>
            <Input class="input"></Input>
          </div>
        </i-col>
      </row>
      <div style="margin-top: 14px">
        <Button type="primary" @click="search()">
          <Icon type="md-search"></Icon>
          搜索
        </Button>
        <Button>重置</Button>
      </div>
      <p
        class="expend"
        @click="
          () => {
            isExpending = !isExpending;
          }
        "
      >
        {{ isExpending ? "收起" : "展开" }}
        <Icon v-if="!isExpending" type="ios-arrow-down" />
        <Icon v-if="isExpending" type="ios-arrow-up" />
      </p>
    </Paper>
    <Paper
      :handle="() => {}"
      style="border-radius: 0px 0px 10px 10px"
      title="用户列表"
    >
      <Divider style="margin: 14px 0px"></Divider>
      <Button class="button">
        <Icon type="md-arrow-up" />
        导出数据
      </Button>
      <Button class="button">
        <Icon type="md-document" />
        导出报告
      </Button>
      <Table
        class="table"
        style="margin-top: 14px"
        ref="selection"
        :columns="columns"
        :data="data.slice((page - 1) * pageSize, page * pageSize)"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="action" @click="yes(row)">批准</span>
          <span class="action" @click="no(row)">不通过</span>
        </template>
      </Table>
      <div
        style="
          margin-top: 14px;
          align-items: center;
          justify-content: space-between;
        "
        class="flex-row"
      >
        <p class="total">{{ `共${data.length}条记录` }}</p>
        <Page size="small" :total="100" ref='page' show-sizer @on-change="pageClickHandle()" @on-page-size-change="pageSizeChange()" />
      </div>
    </Paper>
  </div>
</template>

<script>
import Paper from "../components/Paper.vue";
import Label from "../components/Label.vue";
import FilePreviewer from "../components/FilePreviewer.vue";

import { postRequset } from "../libs/fetch";

export default {
  components: {
    Paper,
    Label,
    FilePreviewer,
  },
  mounted() {
    this.getList();
  },
  methods: {
    statusConversion(status, type = "text") {
      if (type === "text") {
        switch (status) {
          case "0":
            return "待审批";
          case "1":
            return "通过";
          case "2":
            return "未通过";
          default:
            return "状态未知";
        }
      } else {
        switch (status) {
          case "0":
            return "#fe9707";
          case "1":
            return "#b0f193";
          case "2":
            return "#e5e5e5";
          default:
            return "#2c6def";
        }
      }
    },
    getList() {
      postRequset("/sy-admin/list")
        .then((res) => {
          let tempList = res.data;
          console.log(tempList);
          tempList.forEach((element) => {
            this.data.push({
              id:element.uid,
              tel:element.utel,
              name:element.uname,
              mail:element.umail,
              status:element.ustate
            });
          });
        })
        .catch();
    },
    search(){
      this.data=[];
      let id='';
      let tel='';
      let name='';
      let mail='';
      this.firstOptions.forEach(element => {
          if(element.id==1){
            id=element.value;
          };
          if(element.id==2){
            name=element.value;
          }
          if(element.id==3){
            tel=element.value;
          }
          if(element.id==4){
            mail=element.value;
          }
        });
      postRequset("/sy-admin/select",{
        uid: id,
        uName: name,
        uTel: tel,
        uMail: mail,
      })
        .then((res) => {
          let tempList = res.data;
          console.log(tempList);
          tempList.forEach((element) => {
            this.data.push({
              id:element.uid,
              name:element.uname,
              tel:element.utel,
              mail:element.umail,
              status:element.ustate
            });
          });
        })
        .catch();
    },
    yes(row){
      this.tempRow = { ...row };
      postRequset("/sy-admin/update",{
      uid:this.tempRow.id,
      ustate:1
      }).then().catch();
      location.reload();
    },
    no(row){
      this.tempRow = { ...row };
      postRequset("/sy-admin/update",{
        uid:this.tempRow.id,
        ustate:2
      }).then().catch();
      location.reload();
    },
    pageClickHandle() {
      this.page = this.$refs.page.currentPage
    },
    pageSizeChange(){
      this.pageSize = this.$refs.page.currentPageSize
      console.log(this.pageSize);
    },
  },
  data() {
    return {
      isExpending: false,
      page:1,
      pageSize:10,
      firstOptions: [
        {
          id: 1,
          name: "用户ID",
          value:''
        },
        {
          id: 2,
          name: "姓名",
          value:''
        },
        {
          id: 3,
          name: "电话",
          value:''
        },
        {
          id: 4,
          name: "邮箱",
          value:''
        },
      ],
      secondOptions: [
        {
          id: 5,
          name: "描述",
          type: "selector",
          select: [{}],
        },
        {
          id: 6,
          name: "批发市场",
        },
        {
          id: 7,
          name: "其他",
        },
      ],
      columns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "用户ID",
          key: "id",
          width: 200,
        },
        {
          title: "电话",
          key: "tel",
          width: 200,
        },
        {
          title: "姓名",
          key: "name",
          width: 200,
        },
        {
          title: "邮箱",
          key: "mail",
          width: 200,
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            let backgroundColor = this.statusConversion(
              params.row.status,
              "color"
            );
            //jsx
            return (
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <div
                  style={{
                    height: "14px",
                    width: "14px",
                    borderRadius: "10px",
                    marginRight: "4px",
                    marginTop: "-2px",
                    backgroundColor: backgroundColor,
                  }}
                ></div>
                <div>{this.statusConversion(params.row.status)}</div>
              </div>
            );
          },
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          fixed: "right",
          align: "center",
        },
      ],
      data: [],
      tempRow: {}, //暂时存储被选中的行的信息
    };
  },
};
</script>

<style scoped lang="less">
.flex-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
  align-items: center;
}
.input {
  max-width: 230px;
}
.expend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;

  font-size: 12px;
  font-weight: 400;
  color: #1d86f0;
  margin-bottom: -8px;
  cursor: pointer;
}
.button {
  margin-left: 0px;
  margin-right: 4px;
  padding-left: 10px;
}
.action {
  font-size: 14px;
  font-weight: 400;
  color: #1d86f0;
  margin: 0px 4px;
  cursor: pointer;
}
.total {
  margin-left: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #565e66;
}
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.drawer-input {
  margin-bottom: 14px;
}
</style>
<style>
.ivu-table th {
  background-color: #fff !important;
}
</style>